<template>
	<view class="out">
		<view v-for="(item,idx) in list" :key="idx" @click="isSelectedPath?goSureOrder(item): updateAddress(idx)">
			<UniCard>
				<view class="card-item">
					<view class="left">
						<view class="top">
							<text>{{item.name}}</text>
							<text>{{item.tel}}</text>
						</view>
						<view class="down">
							<text v-if="Boolean(+item.isDefalt)" class="active-defalt">默认</text>
							<text>{{item.province}}{{item.city}}{{item.details}}</text>
						</view>
					</view>
					<view>
						<text class="inconfont icon-youjiantou"></text>
					</view>
				</view>
			</UniCard>
		</view>
		<view class="btn-out">
			<view class="add-btn" @click="addAddress">
				+新增地址
			</view>
		</view>
	</view>
</template>

<script>
	import UniCard from '@/components/common/UniCard.vue';
	import http from '@/common/api/reqeust.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'


	export default {
		data() {
			return {
				isSelectedPath: false
			}
		},
		onLoad(e) {
			if (e.type === 'selectPath') {
				this.isSelectedPath = true
			}
			// 初始化拿到收货地址
			this.initAddress()
		},
		components: {
			UniCard
		},
		methods: {
			...mapMutations(['_initAddress']),
			// 请求收获地址
			initAddress() {
				http.request({
					url: '/api/selectAddress',
					method: 'post',
					data: {
						phone: this.userInfo.phone
					}
				}).then(res => {
					this._initAddress(res)
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				})
			},
			// 新增地址
			addAddress() {
				uni.navigateTo({
					url: '/pages/newAddress/newAddress'
				})
			},
			// 修改地址
			updateAddress(index) {
				let pathObj = JSON.stringify({
					index: index,
					item: this.list[index]
				})
				uni.navigateTo({
					url: '/pages/newAddress/newAddress?data=' + pathObj + ''
				})
			},
			// 返回确认订单页面
			goSureOrder(item) {
				if (this.isSelectedPath) {
					uni.$emit('selectPathItem', item)
					uni.navigateBack({
						delta: 1
					})
				}
			}
		},
		computed: {
			...mapState({
				list: state => state.address.list,
				userInfo: state => state.user.userInfo
			}),
		},
	}
</script>

<style scoped lang="scss" scoped>
	.out {
		.card-item {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				.top {
					text:nth-child(1) {
						padding-right: $pd20;
					}
				}

				.down {
					font-size: 12px;

					.active-defalt {
						background-color: orangered;
						display: inline-block;
						text-align: center;
						padding: 5rpx 10rpx;
						color: #fff;
						border-radius: $border-commom;
					}
				}
			}
		}

		.btn-out {
			display: flex;
			justify-content: center;
		}

		.add-btn {
			position: fixed;
			bottom: 0;
			margin-bottom: 10rpx;
			width: 90%;
			height: 70rpx;
			line-height: 70rpx;
			background-color: red;
			border-radius: $pd20;
			text-align: center;
			color: #fff;
			font-size: 14px;
		}
	}
</style>
